<template>
	<div>
		<v-btns :visible="true" title="权限列表">
			<el-input
				type="text"
				v-model="params.key"
				placeholder="账号/昵称/电话号码"
			></el-input>
			<el-button type="light" icon="el-icon-search" @click="getList">
				搜索
			</el-button>
			<template v-slot:foots>
				<el-button
					icon="el-icon-add"
					type="dark"
					size="mini"
					@click="toAddEdit"
				>
					添加权限
				</el-button>
			</template>
		</v-btns>
		<el-table
			:data="tableData"
			border
			style="width: 100%"
			:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
			row-key="id"
			:indent="20"
			:height="$store.state.app.webHeight - 160"
			default-expand-all
		>
			<el-table-column prop="date" fixed label="操作" min-width="240">
				<template slot-scope="scope">
					<el-button
						icon="el-icon-edit"
						type="text"
						@click="toAddEdit(scope.row.id)"
					>
						编辑
					</el-button>
					<el-button
						icon="el-icon-plus"
						type="text"
						@click="toAddEdit(0, scope.row.id)"
						style="color: #34c436"
					>
						增加子级
					</el-button>
				</template>
			</el-table-column>
			<el-table-column
				prop="name"
				label="权限名称"
				align="center"
				min-width="160"
			></el-table-column>
			<el-table-column
				prop="alias"
				label="别名"
				align="center"
				min-width="160"
			></el-table-column>
			<el-table-column prop="status" label="图标" align="center" width="200">
				<template slot-scope="scope">
					<i :class="scope.row.icon" type="text" v-if="scope.row.level == 2">
						{{ scope.row.icon }}
					</i>
					<span v-if="scope.row.level != 2">--</span>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="状态" align="center" width="80">
				<template slot-scope="scope">
					<el-switch
						v-model="scope.row.status"
						active-color="#34C436"
						inactive-color="#909399"
						:active-value="1"
						:inactive-value="0"
					></el-switch>
				</template>
			</el-table-column>

			<el-table-column
				prop="sort"
				label="排序"
				align="center"
				width="120"
			></el-table-column>
		</el-table>
		<el-dialog
			:title="formTitle"
			:visible.sync="formVisible"
			width="500px"
			@closed="closeForm"
		>
			<el-form :model="formData" label-width="100px">
				<el-form-item label="上级权限">
					<el-cascader
						:disabled="isDisabled"
						placeholder="不选为顶级"
						style="width: 300px"
						v-model="formData.pid"
						:options="tableData"
						:props="{
							checkStrictly: true,
							value: 'id',
							label: 'name',
							emitPath: false
						}"
						clearable
					></el-cascader>
				</el-form-item>
				<el-form-item label="权限名称" required>
					<el-input
						v-model="formData.name"
						style="width: 300px"
						placeholder="权限名称"
					></el-input>
				</el-form-item>
				<el-form-item label="别名" required>
					<el-input
						v-model="formData.alias"
						style="width: 300px"
						placeholder="别名"
					></el-input>
				</el-form-item>
				<el-form-item label="图标" required>
					<el-input
						v-model="formData.icon"
						style="width: 300px"
						placeholder="图标"
					></el-input>
				</el-form-item>
				<el-form-item label="排序" required>
					<el-input
						v-model="formData.sort"
						style="width: 300px"
						placeholder="排序"
					></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="light" @click="formVisible = false">取 消</el-button>
				<el-button type="dark" @click="addEdit">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import btns from '@/components/public/btns.vue'
import { mapState } from 'vuex'
import { authList, authAddEdit, authGetDetail } from '@/request/api.js'
import auth from '../mixins/auth'
export default {
	mixins: [auth],
	components: {
		'v-btns': btns
	},
	data() {
		return {
			tableData: [],
			params: {},
			formVisible: false,
			formData: {},
			formTitle: '',
			isDisabled: false
		}
	},
	computed: {
		...mapState(['app'])
	},
	created() {
		this.init()
	},
	methods: {
		init() {
			this.getList()
		},
		getList() {
			authList(this.params).then(res => {
				this.tableData = res.data
			})
		},
		toAddEdit(id, pid) {
			if (pid) {
				this.formData.pid = pid
			}
			this.formVisible = true
			if (id > 0) {
				this.isDisabled = true
				this.formTitle = '编辑'
				this.formData.id = id
				authGetDetail({ id: id }).then(res => {
					if (res.code == 1) {
						this.formData = res.data
					} else {
						this.$message.error(res.msg)
					}
				})
			} else {
				this.formTitle = '添加'
			}
		},
		addEdit() {
			authAddEdit(this.formData).then(res => {
				if (res.code == 1) {
					this.formVisible = false
					this.getList()
					this.$message.success(res.msg)
				} else {
					this.$message.error(res.msg)
				}
			})
		},
		closeForm(done) {
			this.isDisabled = false
			this.formData = {}
			this.formVisible = false
		}
	}
}
</script>
<style lang="scss" scoped></style>
